<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="detailData" label-width="170px" size="mini" label-position="right">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="24">
          <el-col :span="12">
            <el-form-item label="任务名称：">{{detailData.taskName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联计划：">{{detailData.planName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行人：">{{detailData.executeUserName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参与人：">{{detailData.userNames}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作流程：">{{detailData.flowName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设置截至时间：">{{detailData.endDate}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="工作流程进度：">
              <ProcessViewer ref="ProcessViewers" :style="{height: (getMainContextHeight - 500) + 'px'}"
                :xml="processXml"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务描述：">{{detailData.taskDesc}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务日志：">
              <el-scrollbar style="height:15vh;">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.createTime">
                    {{activity.userName}}：{{activity.content}}
                  </el-timeline-item>
                </el-timeline>
              </el-scrollbar>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';
import { mapGetters } from 'vuex';
export default {
  name: 'ProjectsTasksDetail',
  components: { ProcessViewer },
  props: {
    tasksId: {
      default: undefined
    }
  },
  data () {
    return {
      loading: false,
      isShowloading: false,
      processXml: undefined,
      activities: [],
      detailData: {}
    };
  },
  created () {
  },
  computed: {
    isEdit () {
      return this.tasksId != null && this.tasksId !== '';
    },
    ...mapGetters(['getMainContextHeight'])
  },
  mounted () {
    this.loadDetailWidgetData()
    this.loadTasklogWidgetData()
  },
  methods: {
    /**
     * 项目任务详情
     */
    loadDetailWidgetData () {
      let params = {
        id: this.tasksId
      };
      return new Promise((resolve, reject) => {
        Administration.taskview(this, params).then(res => {
          this.detailData = res.data
          this.processXml = res.data.bpmnXml
          setTimeout(() => {
            this.$nextTick(() => {
              this.$refs.ProcessViewers.processReZoom()
            });
          }, 500)
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 任务日志
     */
    loadTasklogWidgetData () {
      let params = {
        taskId: this.tasksId,
        logType: 2
      };
      return new Promise((resolve, reject) => {
        Administration.tasklog(this, params).then(res => {
          this.activities = res.data
        }).catch(e => {
          reject(e);
        });
      });
    }
  }
}
</script>

<style scoped>
h4{margin-bottom: 0;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
</style>
